<template>
  <ul>
    <li>id: {{ message.id }}</li>
    <li>title: {{ message.title }}</li>
    <li>content: {{ message.content }}</li>
  </ul>
</template>

<script>
export default {
  name: "Detail",
  props: ["name", "age", "id"],
  data() {
    return {
      messages: [
        { id: 1, title: "message title 001", content: "message content 001" },
        { id: 3, title: "message title 003", content: "message content 003" },
        { id: 5, title: "message title 005", content: "message content 005" },
      ],
      message: {},
    };
  },
  // 只执行一次
  // mounted() {
  //   console.log(this.$route.params.id);
  // },
  watch: {
    // 监视属性，默认第一次不触发，后面值发生变化才会触发
    // 当地址发生变化，$route就会变化
    // $route(newVal) {
    //   // 获取id参数
    //   const id = +newVal.params.id;
    //   console.log(id);
    //   // 去messages中找到某个对象，在用户界面中展示
    //   const message = this.messages.find((message) => message.id === id);

    //   this.message = message;
    // },

    // 监视$route的变化
    $route: {
      // 一旦变化会触发的回调
      handler(newVal) {
        // 获取id参数
        const id = +newVal.params.id;
        // 去messages中找到某个对象，在用户界面中展示
        const message = this.messages.find((message) => message.id === id);

        this.message = message;
      },
      // 一上来触发
      immediate: true,
    },
  },
};
</script>

<style>
</style>